WebXR Hit Test Resultat: Bearbejdning af Ray Casting-resultater for Immersive Oplevelser

WebXR Device API åbner op for spændende muligheder for at skabe fordybende udvidet virkeligheds (AR) og virtuel virkeligheds (VR) oplevelser direkte i browseren. Et af de grundlæggende aspekter ved at bygge interaktive WebXR-applikationer er at forstå og effektivt udnytte hit test-resultater. Dette blogindlæg giver en omfattende guide til bearbejdning af hit test-resultater opnået gennem ray casting, hvilket gør dig i stand til at skabe intuitive og engagerende brugerinteraktioner inden for dine WebXR-scener.

Hvad er Ray Casting, og hvorfor er det vigtigt i WebXR?

Ray casting er en teknik, der bruges til at afgøre, om en stråle, der udgår fra et specifikt punkt og en retning, skærer objekter i en 3D-scene. I WebXR bruges ray casting typisk til at simulere brugerens blik eller et virtuelt objekts bane. Når strålen skærer en overflade i den virkelige verden (i AR) eller et virtuelt objekt (i VR), genereres et hit test-resultat.

Hit test-resultater er afgørende af flere årsager:

• Placering af virtuelle objekter: I AR gør hit tests det muligt at placere virtuelle objekter præcist på overflader i den virkelige verden, såsom borde, gulve eller vægge.
• Brugerinteraktion: Ved at spore, hvor brugeren kigger eller peger, muliggør hit tests interaktioner med virtuelle objekter, såsom at vælge, manipulere eller aktivere dem.
• Navigation: I VR-miljøer kan hit tests bruges til at implementere navigationssystemer, der giver brugere mulighed for at teleportere eller bevæge sig rundt i scenen ved at pege på specifikke steder.
• Kollisionsdetektion: Hit tests kan bruges til grundlæggende kollisionsdetektion, hvor det afgøres, hvornår et virtuelt objekt kolliderer med et andet objekt eller den virkelige verden.

Forståelse af WebXR Hit Test API'et

WebXR Hit Test API'et leverer de nødvendige værktøjer til at udføre ray casting og opnå hit test-resultater. Her er en gennemgang af de vigtigste begreber og funktioner:

XRRay

En XRRay repræsenterer en stråle i 3D-rummet. Den er defineret af et udgangspunkt og en retningsvektor. Du kan oprette en XRRay ved hjælp af metoden XRFrame.getPose(), som returnerer positionen (pose) for en sporet inputkilde (f.eks. brugerens hoved, en håndcontroller). Ud fra posen kan du udlede strålens udgangspunkt og retning.

XRHitTestSource

En XRHitTestSource repræsenterer en kilde til hit test-resultater. Du opretter en hit test-kilde ved hjælp af metoden XRSession.requestHitTestSource() eller XRSession.requestHitTestSourceForTransientInput(). Den første metode bruges generelt til kontinuerlig hit testing baseret på en vedvarende kilde, såsom brugerens hovedposition, hvorimod den anden er beregnet til forbigående inputhændelser, som knaptryk eller gestus.

XRHitTestResult

Et XRHitTestResult repræsenterer et enkelt skæringspunkt mellem strålen og en overflade. Det indeholder information om skæringspunktet, såsom afstanden fra strålens udgangspunkt til hitpunktet og hitpunktets pose i scenens reference space.

XRHitTestResult.getPose()

Denne metode returnerer XRPose for hitpunktet. Posen indeholder hitpunktets position og orientering, som kan bruges til at placere virtuelle objekter eller udføre andre transformationer.

Bearbejdning af Hit Test-resultater: En Trin-for-Trin Guide

Lad os gennemgå processen med at opnå og bearbejde hit test-resultater i en WebXR-applikation. Dette eksempel antager, at du bruger et renderingbibliotek som three.js eller Babylon.js.

1. Anmodning om en Hit Test Kilde

Først skal du anmode om en hit test-kilde fra XRSession. Dette gøres typisk, efter at sessionen er startet. Du skal angive det koordinatsystem, hvori du ønsker, at hit test-resultaterne skal returneres. For eksempel:

            let xrHitTestSource = null;

async function createHitTestSource(xrSession) {
  try {
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrSession.viewerSpace // Eller xrSession.local
    });
  } catch (error) {
    console.error("Kunne ikke oprette hit test kilde: ", error);
  }
}

// Kald denne funktion, efter at XR-sessionen er startet
// createHitTestSource(xrSession);

            

              
                Copy
              
            
          

Forklaring:

• xrSession.requestHitTestSource(): Denne funktion anmoder om en hit test-kilde fra XR-sessionen.
• { space: xrSession.viewerSpace }: Dette specificerer det koordinatsystem, hvori hit test-resultaterne vil blive returneret. viewerSpace er relativ til brugerens position, mens local er relativ til XR-oprindelsen. Du kan også bruge localFloor til sporing relativt til gulvet.
• Fejlhåndtering: try...catch-blokken sikrer, at fejl under oprettelsen af hit test-kilden fanges og logges.

2. Udførelse af Hit Test i Animationsloopet

Inde i dit animationsloop (funktionen der rendererer hver frame) skal du udføre hit testen ved hjælp af metoden XRFrame.getHitTestResults(). Denne metode returnerer en array af XRHitTestResult-objekter, der repræsenterer alle de skæringspunkter, der er fundet i scenen.

            function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(xrSession.referenceSpace);

  if (pose) {
    if (xrHitTestSource) {
      const hitTestResults = frame.getHitTestResults(xrHitTestSource);

      if (hitTestResults.length > 0) {
        processHitTestResults(hitTestResults);
      }
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Forklaring:

• frame.getViewerPose(xrSession.referenceSpace): Henter brugerens (headsettets) position. Dette er nødvendigt for at vide, hvor brugeren er, og hvor de kigger hen.
• frame.getHitTestResults(xrHitTestSource): Udfører hit testen ved hjælp af den tidligere oprettede hit test-kilde.
• hitTestResults.length > 0: Kontrollerer, om der blev fundet nogen skæringspunkter.

3. Bearbejdning af Hit Test-resultaterne

Funktionen processHitTestResults() er der, hvor du håndterer resultaterne af hit testen. Dette involverer typisk opdatering af et virtuelt objekts position og orientering baseret på hitpunktets pose.

            function processHitTestResults(hitTestResults) {
  const hit = hitTestResults[0]; // Hent det første hit-resultat
  const hitPose = hit.getPose(xrSession.referenceSpace);

  if (hitPose) {
    // Opdater position og orientering for et virtuelt objekt
    virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);

    // Vis visuel feedback (f.eks. en cirkel) ved hitpunktet
    hitMarker.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    hitMarker.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    hitMarker.visible = true;
  } else {
    hitMarker.visible = false;
  }
}

            

              
                Copy
              
            
          

Forklaring:

• hitTestResults[0]: Henter det første hit test-resultat. Hvis flere skæringspunkter er mulige, skal du muligvis iterere gennem hele array'et og vælge det mest passende resultat baseret på din applikations logik.
• hit.getPose(xrSession.referenceSpace): Henter hitpunktets pose i det specificerede reference space.
• virtualObject.position.set(...) og virtualObject.quaternion.set(...): Opdaterer positionen og rotationen (kvaternion) af et virtuelt objekt (f.eks. en three.js Mesh) for at matche hitpunktets pose.
• Visuel Feedback: Eksemplet inkluderer også kode til at vise visuel feedback ved hitpunktet, såsom en cirkel eller en simpel markør, for at hjælpe brugeren med at forstå, hvor de interagerer med scenen.

Avancerede Hit Testing-teknikker

Udover det grundlæggende eksempel ovenfor er der flere avancerede teknikker, du kan bruge til at forbedre dine hit testing-implementeringer:

Hit Testing med Flygtigt Input

For interaktioner udløst af flygtigt input, såsom knaptryk eller håndbevægelser, kan du bruge metoden XRSession.requestHitTestSourceForTransientInput(). Denne metode opretter en hit test-kilde, der er specifik for en enkelt inputhændelse. Dette er nyttigt for at undgå utilsigtede interaktioner baseret på kontinuerlig hit testing.

            async function handleSelect(event) {
  try {
    const frame = event.frame;
    const inputSource = event.inputSource;

    const hitTestResults = await frame.getHitTestResultsForTransientInput(inputSource, {
      profile: 'generic-touchscreen', // Eller den passende inputprofil
      space: xrSession.viewerSpace
    });

    if (hitTestResults.length > 0) {
      processHitTestResults(hitTestResults);
    }
  } catch (error) {
    console.error("Fejl under flygtig hit test: ", error);
  }
}

// Vedhæft denne funktion til din input select event listener
// xrSession.addEventListener('select', handleSelect);

            

              
                Copy
              
            
          

Filtrering af Hit Test-resultater

I nogle tilfælde kan du ønske at filtrere hit test-resultater baseret på specifikke kriterier, såsom afstanden fra strålens udgangspunkt eller typen af overflade, der blev skåret. Dette kan opnås ved manuelt at filtrere XRHitTestResult-arrayet efter at have opnået det.

            function processHitTestResults(hitTestResults) {
  const filteredResults = hitTestResults.filter(result => {
    const hitPose = result.getPose(xrSession.referenceSpace);
    if (!hitPose) return false; // Spring over, hvis ingen pose

    const distance = Math.sqrt(
      Math.pow(hitPose.transform.position.x - camera.position.x, 2) +
      Math.pow(hitPose.transform.position.y - camera.position.y, 2) +
      Math.pow(hitPose.transform.position.z - camera.position.z, 2)
    );

    return distance < 2; // Overvej kun hits inden for 2 meter
  });

  if (filteredResults.length > 0) {
    const hit = filteredResults[0];
    const hitPose = hit.getPose(xrSession.referenceSpace);

    if (hitPose) {
      // Opdater objektets position baseret på det filtrerede resultat
      virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    }
  }
}

            

              
                Copy
              
            
          

Brug af forskellige reference spaces

Valget af reference space (viewerSpace, local, localFloor eller andre brugerdefinerede spaces) har en betydelig indflydelse på, hvordan hit test-resultater fortolkes. Overvej følgende:

• viewerSpace: Giver resultater relativt til brugerens position. Dette er nyttigt til at skabe interaktioner, der er direkte bundet til brugerens blik.
• local: Giver resultater relativt til XR-oprindelsen (startpunktet for XR-sessionen). Dette er velegnet til at skabe oplevelser, hvor objekter forbliver faste i det fysiske miljø.
• localFloor: Ligner local, men Y-aksen er justeret med gulvet. Dette forenkler processen med at placere objekter på gulvet.

Vælg det reference space, der bedst stemmer overens med din applikations krav. Eksperimenter med forskellige reference spaces for at forstå deres adfærd og begrænsninger.

Optimeringsstrategier for Hit Testing

Hit testing kan være en beregningstung proces, især i komplekse scener. Her er nogle optimeringsstrategier at overveje:

• Begræns hyppigheden af Hit Tests: Udfør hit tests kun når det er nødvendigt, snarere end i hver frame. For eksempel kan du udføre hit tests kun når brugeren aktivt interagerer med scenen.
• Brug en Bounding Volume Hierarchy (BVH): Hvis du udfører hit tests mod et stort antal objekter, overvej at bruge en BVH til at accelerere skæringsberegningerne. Biblioteker som three.js og Babylon.js tilbyder indbyggede BVH-implementeringer.
• Spatial Partitionering: Opdel scenen i mindre regioner og udfør hit tests kun mod de regioner, der sandsynligvis indeholder skæringspunkter. Dette kan betydeligt reducere antallet af objekter, der skal kontrolleres.
• Reducer polygonantal: Forenkle geometrien af dine modeller for at reducere antallet af polygoner, der skal testes. Dette kan forbedre ydeevnen, især på mobile enheder.
• WebWorker: Aflast beregningerne til en web worker for at sikre, at hit test-processen ikke blokerer hovedtråden.

Cross-Platform Overvejelser

WebXR sigter mod at være cross-platform, men der kan være subtile forskelle i adfærd på tværs af forskellige enheder og browsere. Husk følgende:

• Enhedskapaciteter: Ikke alle enheder understøtter alle WebXR-funktioner. Brug feature detection til at bestemme, hvilke funktioner der er tilgængelige, og tilpas din applikation derefter.
• Inputprofiler: Forskellige enheder kan bruge forskellige inputprofiler (f.eks. generic-touchscreen, håndsporing, gamepad). Sørg for, at din applikation understøtter flere inputprofiler og leverer passende fallback-mekanismer.
• Ydeevne: Ydeevnen kan variere betydeligt på tværs af forskellige enheder. Optimer din applikation til de lavest ydende enheder, du planlægger at understøtte.
• Browserkompatibilitet: Sørg for, at din app testes og fungerer på tværs af store browsere som Chrome, Firefox og Edge.

Globale Eksempler på WebXR Applikationer, der bruger Hit Testing

Her er nogle eksempler på WebXR-applikationer, der effektivt udnytter hit testing til at skabe overbevisende og intuitive brugeroplevelser:

• IKEA Place (Sverige): Giver brugere mulighed for virtuelt at placere IKEA-møbler i deres hjem ved hjælp af AR. Hit testing bruges til præcist at placere møblerne på gulvet og andre overflader.
• Sketchfab AR (Frankrig): Gør det muligt for brugere at se 3D-modeller fra Sketchfab i AR. Hit testing bruges til at placere modellerne i den virkelige verden.
• Udvidede Billeder (Forskellige): Mange AR-applikationer bruger billedsporing kombineret med hit testing til at forankre virtuelt indhold til specifikke billeder eller markører i den virkelige verden.
• WebXR Spil (Globalt): Talrige spil udvikles ved hjælp af WebXR, hvoraf mange er afhængige af hit testing til objektplacering, interaktion og navigation.
• Virtuelle Rundvisninger (Globalt): Fordybende rundvisninger af steder, museer eller ejendomme anvender ofte hit testing til brugernavigation og interaktive elementer inden for det virtuelle miljø.

At mestre WebXR hit test-resultater og ray casting-bearbejdning er afgørende for at skabe overbevisende og intuitive AR- og VR-oplevelser på nettet. Ved at forstå de underliggende koncepter og anvende de teknikker, der er beskrevet i dette blogindlæg, kan du bygge fordybende applikationer, der sømløst blander den virtuelle og den virkelige verden, eller skabe engagerende virtuelle miljøer med naturlige og intuitive brugerinteraktioner. Husk at optimere din hit testing-implementering for ydeevne og overveje cross-platform kompatibilitet for at sikre en problemfri oplevelse for alle brugere. Efterhånden som WebXR-økosystemet fortsætter med at udvikle sig, kan du forvente yderligere fremskridt og forbedringer af hit testing API'et, hvilket åbner op for endnu flere kreative muligheder for immersiv webudvikling. Konsulter altid de seneste WebXR-specifikationer og browserdokumentation for den mest opdaterede information.